import 'css/common.css'
import './index.css'

import Vue from 'vue'
import axios from 'axios'
import url from 'js/api.js'
import mixin from 'js/mixin.js'

import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll);

import Foot from 'components/Foot.vue'
import Swipe from 'components/Swipe.vue'


let app = new Vue({
  el: '#app',
  data: {
    lists: null,
    pageNum: 1,
    loading: false,
    bannerList: null
  },
  components:{
    Foot,
    Swipe
  },
  created(){
    this.getHotLists();
    this.getBanner()
  },
  methods: {
    getHotLists(){
      this.loading = true;
      if(this.pageNum >= 5){
        this.loading = false;
        return
      }
      axios.get(url.hostLists).then(function(res){
        if(this.lists){
          this.lists = this.lists.concat(res.data.lists);
        }else {
          this.lists = res.data.lists;
        }
        this.loading = false;
        this.pageNum++;
      }.bind(this)).catch((err)=>{
        console.error(err)
      });
    },
    getBanner(){
      axios.get(url.bannerList)
        .then((res)=>{
          this.bannerList = res.data.lists
      })
        .catch(err=>{
        console.err(err)
      })
    }
  },
  mixins: [mixin]

});

